<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="datare">
                  <div class="ra">账户信息</div>
                    <div class="toxian">
                        <div class="l101">
                          <div class="l101b" style="padding-left:30px;border-right:solid 1px rgb(220,220,220)">
                            <div class="l101b_bt">
                              <el-button>本地上传</el-button>
                              <el-button>拍照上传</el-button>
                            </div>
                            <div class="l101b_img">
                              头像预览
                            </div>
                            <p>仅支持JPG,PNG,GIF三种格式图片</p>
                            <el-upload
                              class="upload-poster"                               
                              action="https://jsonplaceholder.typicode.com/posts/"
                              :show-file-list="false"
                              :auto-upload="false">
                              <img v-if="imageUrl" :src="imageUrl" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                          </div>
                          <div class="l101b">
                            <p style="text-align: center;">系统自动生产以下两种规格的头像</p>
                            <div class="l101b_tx">
                              <div class="l101b_tx_x">
                                <div class="l101b_tx_x1"></div>
                                <p style="text-align: center;">正方形尺寸 100*100像素</p>
                              </div>
                              <div class="l101b_tx_x">
                                <div class="l101b_tx_x1" style="border-radius: 50%;"></div>
                                <p style="text-align: center;">圆形尺寸 100*100像素</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <el-button style="display: block;margin: 40px auto;">保存</el-button>
                  </div>
                  <businessF/>
                </div>
              </div>
              
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessF from '@/components/businessF'
import businessL from '@/components/businessL'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessF,
    businessL
    },
    data() {
      return {
        // dialogImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        // dialogVisible: false
        imageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        // images1:[{url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"}]
      }
    },
    methods: {
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    },
}
</script>
<style scoped>
.datare /deep/  .el-tabs__nav {margin-left: 60px}
.datare /deep/ .el-tabs__item.is-active {color: #f06048;}
.datare /deep/ .el-tabs__active-bar {color: #f06048;}
.datare /deep/ .el-tabs__item:hover {color: #f06048;}
.datare /deep/ .el-tabs__active-bar {background-color:#f06048 }
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.datale .router-link-exact-active {
  color: #ff9381;
}
.datale a:hover{
  color: #ff9381;
}
.datale {
  /* width: 216px; */
	background-color: #ffffff;
	border-radius: 6px;
  /* height: 200px; */
}   
.borebon {
  border-bottom: 12px solid #eee;
}
.borebon ul{
  display: inline-block;
  margin-left: 20px;
  
}
.borebon ul span{
  font-size: 24px;
	font-weight: 550;
	font-stretch: normal;
	line-height: 32px;
	letter-spacing: 0px;
	color: #313131;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
.borebon ul li {
      width: 146px;
    line-height: 34px;
    font-size: 15px
}
.ontoi .datale .sonh_g li{
  width: 120px;
}  
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.toxian {
  margin-top: 23px;
}
.gerrn {
  width: 810px;
  margin: 0 auto;
}


/* l上传头像 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar-uploader-icon:hover{
    border-color: #409EFF;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
    /* L */
  .l101{
    width: 100%;
    display: flex;
  }
  .l101b{
    width: 50%;
  }
  .l101b_img{
    width: 178px;
    height: 178px;
    background-color: rgb(220,220,220);
    line-height: 178px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    color: rgb;
    color: rgb(178,178,178);
  }
  .l101b_tx{
    display: flex;
    justify-content: space-around;
  }
  .l101b_tx_x{
    width: 40%;
  }
  .l101b_tx_x1{
    width: 100px;
    height: 100px;
    background-color: rgb(220, 220,220);
    margin: 40px auto;
  }
  


  
</style>